<template>
  <el-card class="categories-container">
    <!-- 头部区域 -->
    <template #header>
      <page-header title="类目管理">
        <el-button type="primary" @click="showAddDialog">添加类目</el-button>
      </page-header>
    </template>

    <!-- 类目列表 -->
    <div class="categories-list">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>类目名称</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(category, index) in categories" :key="category.id">
            <td>{{ index + 1 }}</td>
            <td>{{ category.name }}</td>
            <td>{{ formatDate(category.created_at) }}</td>
            <td>
              <button class="edit-btn" @click="editCategory(category)">编辑</button>
              <button class="delete-btn" @click="confirmDelete(category)">删除</button>
            </td>
          </tr>
        </tbody>
      </table>
    </div>

    <!-- 添加/编辑对话框 -->
    <div v-if="showDialog" class="dialog-overlay" @click="closeDialog">
      <div class="dialog" @click.stop>
        <h3>{{ isEdit ? '编辑类目' : '添加类目' }}</h3>
        <form @submit.prevent="handleSubmit">
          <div class="form-item">
            <label>类目名称</label>
            <input v-model="formData.name" type="text" required placeholder="请输入类目名称" />
          </div>
          <div class="dialog-footer">
            <button type="button" class="cancel-btn" @click="closeDialog">取消</button>
            <button type="submit" class="submit-btn">确定</button>
          </div>
        </form>
      </div>
    </div>
  </el-card>
</template>

<script>
import { ref, onMounted } from 'vue'
import { getCategories, addCategory, updateCategory, deleteCategory } from '@/api/categories'

export default {
  name: 'Categories',
  setup() {
    const categories = ref([])
    const showDialog = ref(false)
    const isEdit = ref(false)
    const formData = ref({ name: '' })
    const editingId = ref(null)

    const loadCategories = async () => {
      try {
        const data = await getCategories()
        categories.value = data
      } catch (error) {
        console.error('加载类目失败:', error)
      }
    }

    const showAddDialog = () => {
      isEdit.value = false
      formData.value = { name: '' }
      showDialog.value = true
    }

    const editCategory = category => {
      isEdit.value = true
      editingId.value = category.id
      formData.value = { name: category.name }
      showDialog.value = true
    }

    const handleSubmit = async () => {
      try {
        if (isEdit.value) {
          await updateCategory(editingId.value, formData.value)
        } else {
          await addCategory(formData.value)
        }
        await loadCategories()
        closeDialog()
      } catch (error) {
        console.error('保存失败:', error)
      }
    }

    const confirmDelete = async category => {
      if (confirm(`确定要删除类目"${category.name}"吗？`)) {
        try {
          await deleteCategory(category.id)
          await loadCategories()
        } catch (error) {
          console.error('删除失败:', error)
        }
      }
    }

    const closeDialog = () => {
      showDialog.value = false
      formData.value = { name: '' }
    }

    const formatDate = date => {
      return new Date(date).toLocaleString('zh-CN')
    }

    onMounted(loadCategories)

    return {
      categories,
      showDialog,
      isEdit,
      formData,
      showAddDialog,
      editCategory,
      handleSubmit,
      confirmDelete,
      closeDialog,
      formatDate
    }
  }
}
</script>

<style lang="scss" scoped>
.categories-container {
  height: 100%;
  margin: -20px;
  
  :deep(.el-card__header) {
    padding: 0;
    border-bottom: 1px solid var(--el-border-color-light);
  }

  :deep(.el-card__body) {
    padding: 0;
    height: calc(100% - 56px);
    overflow-y: auto;
  }
}

.add-btn {
  padding: 8px 16px;
  background: #409eff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  border-radius: 4px;
  overflow: hidden;
}

th,
td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

th {
  background: #f5f7fa;
  color: #606266;
}

.edit-btn,
.delete-btn {
  padding: 4px 8px;
  margin-right: 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.edit-btn {
  background: #67c23a;
  color: white;
}

.delete-btn {
  background: #f56c6c;
  color: white;
}

.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.dialog {
  background: white;
  padding: 20px;
  border-radius: 4px;
  width: 90%;
  max-width: 400px;
}

.form-item {
  margin-bottom: 20px;
}

.form-item label {
  display: block;
  margin-bottom: 8px;
}

.form-item input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.cancel-btn,
.submit-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.cancel-btn {
  background: #909399;
  color: white;
}

.submit-btn {
  background: #409eff;
  color: white;
}

@media (max-width: 768px) {
  .categories-container {
    padding: 10px;
  }

  table {
    font-size: 14px;
  }

  th,
  td {
    padding: 8px;
  }
}
</style>
